<template>
	<view class="module-box task-box">
		<view class="acea-row row-middle row-between">
			<view class="module-title">悬赏任务（规则）</view>
			<!-- <view class="task-top-btn">赏金商城</view> -->
			<view class="acea-row row-middle row-between">
				<view class="task-top-btn" style="margin-right: 20rpx;"
					@click="toPages('/pages/others/promotionTask/promotionTask?type='+tabNavOnList[tabNavOn].toType)">{{tabNavOnList[tabNavOn].label}}</view>
				<view class="task-top-btn" @click="myStorePage">赏金商城</view>
			</view>
		</view>
		<view class="task-list">
			<view class="task-item" v-for="(item,index) in taskList" :key="index">
				<task-item :list="item"></task-item>
			</view>
		</view>

		<!-- <view class="task-more-btn">
			查看更多任务
		</view> -->
	</view>
</template>

<script>
	import {
		RewardListApi
	} from '@/api/reward.js'
	import taskItem from '@/pages/others/components/taskItem.vue'
	export default {
		components: {
			taskItem
		},
		props: {
			tabNavOn: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				taskList: [],
				tabNavOnList:{
					0:{
						label:'悬赏大厅',
						toType: 0
					},
					1:{
						label:'商铺悬赏',
						toType: 0
					},
					2:{
						label:'二手悬赏',
						toType: 5
					},
					3:{
						label:'供应悬赏',
						toType: 6
					},
					4:{
						label:'商家悬赏',
						toType: 4
					},
					5:{
						label:'招工悬赏',
						toType: 3
					}
				}
			}
		},
		mounted() {
			this.getRewardList()
		},
		methods: {
			//悬赏任务
			async getRewardList() {
				try {
					let res = await RewardListApi({
						limit: 2,
						page: 1,
						type: this.tabNavOnList[this.tabNavOn].toType
					});
					this.taskList = res.data.list;
					console.log(this.tabNavOnList[this.tabNavOn].toType,this.taskList)
				} catch (e) {
					//TODO handle the exception
				}
			},
			toPages(path) {
				uni.navigateTo({
					url: path
				})
			},
			myStorePage(type) {
				let url = '/pages/goods/goods_list/index';
				wx.navigateTo({
					url
				});
			},

		}
	}
</script>

<style lang="scss">
	.module-box {
		background: #ffffff;
		border-radius: 10rpx 10rpx 0 0;
		margin: 0 26rpx 26rpx;
		padding: 36rpx;

		.module-title {
			padding-left: 18rpx;
			position: relative;
			font-size: 32rpx;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);

			&::after {
				display: block;
				content: '';
				position: absolute;
				top: 50%;
				left: 0;
				margin-top: -15rpx;
				width: 6rpx;
				height: 30rpx;
				opacity: 1;
				border-radius: 30rpx;
				background: rgba(238, 34, 46, 1);

			}
		}
	}

	// 悬赏任务
	.task-box {
		.task-more-btn {
			margin: 24rpx auto;
			width: 222rpx;
			height: 52rpx;
			opacity: 1;
			border-radius: 30rpx;
			border: 1px solid rgba(238, 33, 45, 1);
			font-size: 26rpx;
			font-weight: 400;
			line-height: 52rpx;
			color: rgba(238, 33, 45, 1);
			text-align: center;
		}

		.task-top-btn {
			width: 154rpx;
			height: 46rpx;
			line-height: 46rpx;
			text-align: center;
			border-radius: 30rpx;
			border: 1px solid rgba(238, 33, 45, 1);
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(238, 33, 45, 1);
		}

		// .task-list {
		// 	.task-item {
		// 		padding: 16rpx 22rpx;
		// 		height: 218rpx;
		// 		background: rgba(255, 255, 255, 1);
		// 		box-shadow: 2rpx 4rpx 8rpx 10rpx rgba(0, 0, 0, 0.03);
		// 		margin-top: 28rpx;

		// 		.item-top {
		// 			.task-tit {
		// 				width: 65%;
		// 			}

		// 			.task-tit-l {
		// 				// width: 30%;
		// 				font-size: 24rpx;
		// 				font-weight: 400;
		// 				color: rgba(166, 166, 166, 1);
		// 				text-align: center;

		// 				.task-top-btn {
		// 					width: 132rpx;
		// 					height: 42rpx;
		// 					margin: 0 auto 6rpx;
		// 					line-height: 42rpx;
		// 					text-align: center;
		// 					border-radius: 50rpx;
		// 					background: rgba(238, 33, 45, 1);
		// 					border: 1px solid rgba(235, 36, 61, 1);
		// 					color: #ffffff;
		// 				}
		// 			}
		// 		}

		// 		.item-bottom {
		// 			.share-list {
		// 				width: 75%;

		// 				.share-item {
		// 					/** 文本1 */
		// 					font-size: 24rpx;
		// 					font-weight: 400;
		// 					color: rgba(166, 166, 166, 1);
		// 					margin-top: 12rpx;

		// 					text {
		// 						/** 文本2 */
		// 						font-size: 24rpx;
		// 						font-weight: 400;
		// 						color: rgba(212, 48, 48, 1);
		// 					}
		// 				}
		// 			}

		// 			.item-bottom-btn {
		// 				font-size: 24rpx;
		// 				font-weight: 400;
		// 				color: rgba(238, 33, 45, 1);

		// 			}
		// 		}
		// 	}
		// }
	}
</style>